<section>
  <header>
    <div class="title">
      <span>更新客户端</span>
      <div>
        <ng-container *ngIf="!formGroup.untouched; else publicRef">
          <button mat-icon-button form="form" [disabled]="(progress$ | async) !== 0">
            <mat-icon>check_circle</mat-icon>
          </button>
          <button mat-icon-button (click)="resetForm()">
            <mat-icon>highlight_off</mat-icon>
          </button>
        </ng-container>
        <ng-template #publicRef>
          <!-- <button class="button" class="btn btn-sm btn-outline-dark" (click)="public()">
            发布
          </button> -->
        </ng-template>
      </div>
    </div>
  </header>
  <main>
    <form class="ml-3" id="form" [formGroup]="formGroup" (ngSubmit)="dataTableRef.refresh(submit())">
      <div class="form-group row">
        <label for="version" class="col-form-label col-1">版本号：</label>
        <div class="col-3">
          <input id="version" type="text" class="form-control form-control" formControlName="version"
            [readonly]="readonly" />
        </div>
      </div>
      <div class="form-group row">
        <label for="architecture" class="col-form-label col-1">架构信息：</label>
        <div class="col-3">
          <mat-select class="form-control selected" formControlName='architecture' [value]="architectureSelect" [disabled]="readonly">
            <ng-container *ngIf="architectureList$ | async as architectureList">
              <mat-option *ngFor="let architecture of objectKeys(architectureList)" [value]="architecture">
                {{ architecture }}
              </mat-option>
            </ng-container>
          </mat-select>
        </div>
      </div>
      <div class="form-group row" *ngIf="formGroup.get('file') as fileControl">
        <label for="file" class="col-form-label col-1">文件：</label>
        <div class="col-11 d-flex align-items-center">
          <button type="button" class="btn btn-secondary btn" [class.ng-invalid]="fileControl.invalid"
            [class.ng-touched]="!fileControl.untouched" (click)="upload()">
            上传文件
          </button>
          <span class="text-muted ml-3" *ngIf="formGroup.valueChanges | async as value">
            {{ value?.file?.name }}
          </span>
          <span class="ml-5" *ngIf="progress$ | async as progress">
            <progress [max]="1" [value]="progress"></progress> {{ progress | percent }}
            <button type="button" class="btn btn-sm btn-secondary ml-3" (click)="cancel()">
              取消
            </button>
          </span>
        </div>
      </div>
    </form>
  </main>
  <footer>
    <m-api-data-table [dataSource]="dataSource" #dataTableRef>
      <ng-container mDataTableColumn header="MD5">
        <ng-template let-md5="md5_check">
          <td>{{ md5 }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="文件名称">
        <ng-template let-name="file_name">
          <td><div class="wider-div" [attr.alt]="name" [attr.title]="name">{{ name }}</div></td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="架构">
        <ng-template let-architecture="Architecture">
          <td>{{ architecture }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="版本">
        <ng-template let-version="Version">
          <td>{{ version }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="URL">
        <ng-template let-url="url">
          <td><div class="wider-div" [attr.alt]="url" [attr.title]="url">{{ url }}</div></td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="上传时间">
        <ng-template let-created_at="created_at">
          <td>{{ created_at | date }}</td>
        </ng-template>
      </ng-container>
      <ng-container mDataTableColumn header="操作">
        <ng-template let-id="id" let-version="Version">
          <td>
            <button mat-icon-button [matMenuTriggerFor]="editMenu">
              <mat-icon>edit</mat-icon>
            </button>

            <mat-menu #editMenu>
              <button mat-menu-item (click)="dataTableRef.refresh(delete(version, id))">删除</button>
            </mat-menu>
          </td>
        </ng-template>
      </ng-container>
    </m-api-data-table>
  </footer>
</section>